<template>
    <div>
        <el-form :model="childMainData" size="min"   label-width="200px">

            <el-form-item v-for='item in childMapAttrs' :rules="item.rules" v-show="item.UIVisible===1" :label="item.MyDataType===4?'':item.Name" :key='item.KeyOfEn' :prop="item.KeyOfEn" >
                <template v-if="item.UIContralType==0 && item.MyDataType===1">
                    <!-- 文本输入框 -->
                    <el-input  v-if="item.type==='Input'&& item.UIHeight<40"  :disabled="item.UIIsEnable===0" v-model="childMainData[item.KeyOfEn]" :style="{width:item.width}" ></el-input>
                    <el-input v-if="item.type==='Input'&&item.UIHeight>40" type="textarea"  :disabled="item.UIIsEnable===0" v-model="childMainData[item.KeyOfEn]" :style="{width:item.width}" rows="5"></el-input>
                    <!-- 多选复选框 -->
                    <el-checkbox-group v-if="item.type==='CheckBox'" v-model="childMainData[item.KeyOfEn]">
                        <el-checkbox v-for="ch in item.checks" :label="ch.No" :key="ch.Name">{{ch.Name}}</el-checkbox>
                    </el-checkbox-group>

                    <!--单选-->
                    <el-radio-group v-if="item.type==='Radio'" v-model="childMainData[item.KeyOfEn]" >
                        <el-radio v-for="ra in item.radios" :label="ra.No" :key="ra.No">{{ra.Name}}</el-radio>
                    </el-radio-group>

                    <!--搜索多选-->
                    <template v-if="item.type=='ChoiceSearch'">
                        <ChoiceSearch :mapExt="item.mapExt" :readOnly="false" :placeholder="item.Name" v-model="childMainData[item.KeyOfEn]"></ChoiceSearch>
                    </template>
                    <!--可编辑的选择-->
                    <template v-if="item.type=='InputSearch'">
                        <InputSearch :mapExt="item.mapExt" :readOnly="false" :placeholder="item.Name" v-model="childMainData[item.KeyOfEn]"></InputSearch>
                    </template>
                    <!--popover弹出窗-->
                    <Popover v-if="item.type=='Popover'" :mapExt="item.mapExt" :popModel="item.PopModel"></Popover>


                </template>

                <!-- 整数输入框 -->
                <el-input type="text" v-if="item.MyDataType===2"  :disabled="item.UIIsEnable===0" v-model.number="childMainData[item.KeyOfEn]" :style="{width:item.width}" ></el-input>
                <!--浮点型-->
                <el-input type="text" v-if="item.MyDataType===3"  :disabled="item.UIIsEnable===0" v-model="childMainData[item.KeyOfEn]" v-bind:value="getValue(item)" :style="{width:item.width}" @input="changeInputVal(item)"></el-input>
                <!--float-->
                <el-input type="text" v-if="item.MyDataType===5"  :disabled="item.UIIsEnable===0" v-model="childMainData[item.KeyOfEn]" v-bind:value="getValue(item)" :style="{width:item.width}" @input="changeInputVal(item)"></el-input>
                <!--Money-->
                <el-input type="text" v-if="item.MyDataType===8"  :disabled="item.UIIsEnable===0" v-model="childMainData[item.KeyOfEn]" :style="{width:item.width}" @input="changeInputVal(item)"></el-input>

                <template v-if="item.MyDataType==6 || item.MyDataType==7">
                    <!-- 日期、日期时间 -->
                    <el-date-picker v-if="item.FormatType=='yyyy-MM-dd'|| item.FormatType=='yyyy-MM'|| item.FormatType=='MM-dd'"  :disabled="item.UIIsEnable===0" v-model="childMainData[item.KeyOfEn]" :style="{width:item.width}"  :format="item.FormatType" :value-format="item.FormatType" :picker-options="item.pickerOption==true?pickerOptions:''"></el-date-picker>
                    <el-date-picker v-if="item.FormatType=='yyyy-MM-dd HH:mm'|| item.FormatType=='yyyy-MM-dd HH:mm:ss'"  :disabled="item.UIIsEnable===0" v-model="childMainData[item.KeyOfEn]" type='datetime' :style="{width:item.width}"  :format="item.FormatType" :value-format="item.FormatType" :picker-options="item.pickerOption==true?pickerOptions:''"></el-date-picker>
                    <!-- 时间 -->
                    <el-time-picker v-if="item.FormatType=='HH:mm' || item.FormatType=='HH:mm:ss'"  :disabled="item.UIIsEnable===0" type='datetime' v-model="childMainData[item.KeyOfEn]"  :format="item.FormatType" :value-format="item.FormatType" ></el-time-picker>
                </template>
                <template v-if="item.UIContralType==1">
                    <!-- 下拉框 -->
                    <el-select v-if="item.UIContralType===1"  :disabled="item.UIIsEnable===0" v-model="childMainData[item.KeyOfEn]"  :style="{width:item.width}" @change="SelectChange(item,item.mapExts)">
                        <el-option v-for="op in item.options" :label="op.Name" :value="op.No" :key="op.No"></el-option>
                    </el-select>
                </template>
                <template v-if="item.UIContralType==2">
                    <!-- 复选框 -->
                    <el-checkbox v-if="item.MyDataType===4"  :disabled="item.UIIsEnable===0" v-model="childMainData[item.KeyOfEn]">{{item.Name}}</el-checkbox>
                </template>
                <template v-if="item.UIContralType==3">
                    <!-- 单选 -->
                    <el-radio-group v-if="item.type==='Radio'"  :disabled="item.UIIsEnable===0" v-model="childMainData[item.KeyOfEn]">
                        <el-radio v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ra.label}}</el-radio>
                    </el-radio-group>
                    <!-- 单选按钮 -->
                    <el-radio-group v-if="item.type==='RadioButton'"  :disabled="item.UIIsEnable===0" v-model="childMainData[item.KeyOfEn]" @change="item.change && item.change(toolbarData[item.KeyOfEn])">
                        <el-radio-button v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ra.label}}</el-radio-button>
                    </el-radio-group>
                </template>

                <!-- 开关 -->
                <el-switch v-if="item.type==='Switch'" v-model="childMainData[item.KeyOfEn]" ></el-switch>
                <template v-if="item.IsHaveRm==true">
                    <el-link  :underline="false" @click="OpenDialog(item.DTM)">{{item.DTM.Title}}</el-link>
                </template>
            </el-form-item>

        </el-form>

    </div>
</template>

<script>

    import{getInputValue} from "../../api/js/Money.js"
    import * as formEnd from '@/api/js/MapAttrForm.js';
    import ChoiceSearch from "./ChoiceSearch.vue";
    import InputSearch from "./InputSearch.vue";
    import Popover from "../ccform/Pop/Popover.vue";
    import {FloatInputCheck,testExpression,calculator,CoverMoneyToChinese} from '@/api/tools.js';
    import Vue from 'vue';
    Vue.prototype.$formEnd = formEnd
    export default {
        name: "MapAttrForm",
        props:{
            mapAttrs:{
                type:Array,
                default:()=>[]
            },
            mainData:{},

        },
        components:{
            ChoiceSearch,
            InputSearch,
            Popover
        },
        data() {
            return {
                webUser:{},
                childMapAttrs:[],
                childMainData:{},
                pickerOptions: { // 日期设置对象
                    disabledDate(date) {
                        //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
                        return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
                    }
                },
            }
        },
        created(){
            this.webUser= this.$store.getters.getWebUser;
            const obj={};
            for(var key in this.mainData) {
                obj[key] = this.mainData[key];
            }
            this.childMainData=obj;
            this.childMapAttrs=this.mapAttrs;

            //处理MapExt的熟悉
            this.childMapAttrs.forEach(mapAttr=>{
                mapAttr.type="Input";
                if(mapAttr.IsHaveMapExt == true){
                    let mapExts = mapAttr.mapExts;
                    this.MapExtsForString(mapAttr,mapExts);
                    if(mapAttr.MyDataType==6||mapAttr.MyDataType==7){
                        mapExts.forEach(mapExt=>{
                            if(mapExt.ExtType=="DataFieldInputRole" &&mapExt.DoWay == 1 && mapExt.Tag1 == 1){
                                mapAttr.pickerOption=true;
                                return false;
                            }
                        })
                    }
                }
            });

        },
        methods:{
            inputMoney(el,name) {
                this.childMainData[name] = getInputValue(el);
            },
            changeInputVal(mapAttr){
                let keyOfEn = mapAttr.KeyOfEn;
                let defVal = mapAttr.DefVal;
                let bit=2;
                if(defVal!=null && defVal!=undefined && defVal!='')
                    bit = defVal.substring(defVal.lastIndexOf(".")+1).length;
                this.childMainData[keyOfEn] = FloatInputCheck(this.childMainData[keyOfEn],bit);
                this.MapExtsForNumber(mapAttr);

            },
            getValue(mapAttr){
                if(mapAttr.IsHaveMapExt == false)
                    return;
                this.MapExtsForNumber(mapAttr);
            },
            OpenDialog(dtm){
                //函数 @功能待定
                if (parseInt(dtm.RefMethodType) == 0){
                    //需要区分是否有参数
                //其他的是弹出框
                //}else{

                }
            },

            SelectChange(mapAttr,mapExts){
                if(mapAttr.IsHaveMapExt == false)
                    return;
                //如果不可编辑就不处理扩展
                if(mapAttr.UIIsEnable==0)
                    return;
                //下拉框的处理顺序 级联，填充，绑定的chang事件（配置的时候按照顺序设置）
                mapExts.forEach(mapExt=> {
                    let selectVal = this.childMainData[mapAttr.KeyOfEn];
                    if (mapExt.ExtType == "ActiveDDL") { //级联

                        let childKeyOfEn = mapExt.AttrsOfActive; //级联下一级的元素
                        let childMapAttr = this.$.grep(this.childMapAttrs, function (obj) {
                            return obj.KeyOfEn == childKeyOfEn;
                        })[0];
                        if (selectVal == "" || selectVal == "all") {
                            childMapAttr.options = [];
                            this.childMainData[childKeyOfEn] = "";
                        } else {
                            let dbsrc = mapExt.Doc;
                            dbsrc = dbsrc.replace(/@Key/g, selectVal);
                            childMapAttr.options = this.DBAccess.RunDBSrc(dbsrc, mapExt.DBType);
                        }
                    }
                    //填充
                    var DDLFull = this.GetPara(mapAttr.AtPara,"IsFullData");
                    if (DDLFull != undefined && DDLFull != "" && DDLFull == "1" && (mapExt.MyPK.indexOf("DDLFullCtrl") != -1)) {
                        if (mapAttr.UIIsEnable == 0 )
                            return true;
                        this.FullIt(selectVal, mapExt);
                    }
                    //绑定函数
                    if(mapExt.ExtType=="BindFunction")
                        this.DBAccess.RunFunctionReturnStr(mapExt.Doc);
                });
            },
            FullIt(selectVal,mapExt){
                let mapExtFull;
                //判断你是不是填充其他控件
                if(mapExt.MyPK.indexOf("FullData")==-1){
                    mapExtFull = new this.Entity("BP.Sys.MapExt");
                    mapExtFull.SetPKVal(mapExt.MyPK+"_FullData");
                    if(mapExtFull.RetrieveFromDBSources()==0)
                        return;

                }else{
                    mapExtFull = new this.Entity("BP.Sys.MapExt",mapExt);
                    mapExtFull.MyPK= mapExt.MyPK;
                }
                //填充主表
                this.FullCtrl(selectVal,mapExt);

            },
            FullCtrl(selectVal,mapExt){
                let dbSrc = mapExt.Doc;
                if (dbSrc == null || dbSrc == "") {
                    return;
                }
                let dataObj = this.GenerDB(dbSrc, selectVal, mapExt.DBType);
                if (this.$.isEmptyObject(dataObj))
                    return;
                dataObj = dataObj[0]; //获得这一行数据.
                for (var key in dataObj){
                    this.$parent.mainData[key]=dataObj[key];
                }
            },

            AfterBindEn_DealMapExt(){



            },
            MapExtsForNumber(mapAttr){
                let mapExts = mapAttr.mapExts;
                mapExts.forEach(mapExt=> {
                    //自动计算
                    if(mapExt.ExtType=="AutoFull" && mapExt.Doc!=null && mapExt.Doc!=""){//自动计算
                        if (testExpression(mapExt.Doc)==false) {
                            this.$message.warning("MyPk: " + mapExt.MyPK + ", 表达式: '" + mapExt.Doc + "'格式错误");
                            return true;
                        }
                        this.childMainData[mapAttr.KeyOfEn]= calculator(mapExt.Doc,this.childMainData);
                        return true;
                    }
                    //计算两个时间的天数
                    if(mapExt.ExtType=="ReqDays"){
                        let startDt = mapExt.Tag1;//开始日期
                        let endDt = mapExt.Tag2;//结束日期
                        let type = mapExt.Tag3;//是否包含节假日 0包含，1不包含
                        let dateSpan;
                        startDt = Date.parse(this.childMainData[startDt]);
                        endDt = Date.parse(this.childMainData[endDt]);
                        dateSpan = endDt - startDt;
                        if(Object.is(dateSpan, NaN)){
                            this.childMainData[mapAttr.KeyOfEn]="";
                            return;
                        }

                        if(dateSpan<0){
                            this.$message.warning("结束时间不能小于开始时间");
                            return true;
                        }
                        dateSpan = Math.abs(dateSpan);
                        dateSpan = Math.floor(dateSpan / (24 * 3600 * 1000));
                        if(type == 0){ //包含节假日
                            var holidayEn = new this.Entity("BP.Sys.GloVar");
                            holidayEn.No = "Holiday";
                            if (holidayEn.RetrieveFromDBSources() == 1) {
                                var holidays = holidayEn.Val.split(",");
                                dateSpan = dateSpan - (holidays.length - 1);
                                //检查计算的天数
                                if (dateSpan <= 0) {
                                    this.$message.warning("请假时间内均为节假日");
                                    dateSpan = "";
                                }
                            }
                        }
                        this.childMainData[mapAttr.KeyOfEn] = dateSpan;

                    }
                    //金额小写转大写
                    if(mapExt.ExtType=="RMBDaXie" && mapExt.Doc!=null && mapExt.Doc!=""){//转大写
                        this.childMainData[mapExt.Doc] = CoverMoneyToChinese(this.childMainData[mapAttr.KeyOfEn]);
                        return true;
                    }
                });

            },
           MapExtsForString(mapAttr,mapExts){
               let _this = this;
               //字符型字段
               if(mapAttr.MyDataType==1 && mapAttr.UIContralType==0){
                   mapExts.forEach(mapExt=>{
                       //pop弹出窗
                       let popModel=this.GetPara(mapAttr.AtPara,"PopModel");
                       if (popModel != undefined && popModel != "" && popModel != "None" && mapExt.ExtType==popModel ){
                           //处理pop弹出窗
                           mapAttr.type="Popover";
                           mapAttr.PopModel = popModel;
                           mapAttr.mapExt = mapExt;
                           return true;
                       }
                       //自动完成
                       let TBModel = this.GetPara(mapAttr.AtPara,"TBFullCtrl");
                       if (TBModel != undefined && TBModel != "" && TBModel != "None" && mapExt.ExtType == "FullData"){
                           mapAttr.type="AutoComplete";
                           mapAttr.mapExt = mapExt;
                           return true;
                       }
                       switch(mapExt.ExtType){
                           case "MultipleChoiceSmall"://小范围多选
                               mapAttr.type="CheckBox";
                               mapAttr.checks= this.$formEnd.MultipleChoiceSmall(mapExt,mapAttr,this);
                               var defVal = _this.childMainData[mapAttr.KeyOfEn];
                               if(defVal=="" || defVal==false)
                                   _this.childMainData[mapAttr.KeyOfEn]=[];
                               else
                                   _this.childMainData[mapAttr.KeyOfEn]=this.childMainData[mapAttr.KeyOfEn].split(",");
                               break;
                           case "SingleChoiceSmall": //小范围单选
                               mapAttr.type="Radio";
                               mapAttr.radios= this.$formEnd.MultipleChoiceSmall(mapExt,mapAttr,this);
                               break;
                           case "MultipleChoiceSearch": //搜索多选
                               mapAttr.type="ChoiceSearch"
                               mapAttr.mapExt = mapExt;
                               break;
                           case"MultipleInputSearch":
                               mapAttr.type="InputSearch"
                               mapAttr.mapExt = mapExt;
                               break;
                           default:break;
                       }
                   });
               }
           },
        },
        computed:{

        },
        watch:{
            childMainData(val){
                this.$emit("on-mainData-change",val);
            },
            mainData(val){
                this.childMainData=val;
            }
        }
    }
</script>

<style scoped>

</style>